<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>动画属性之速度曲线-步长</title>
        <style>
            div {
                overflow: hidden;
                font-size: 20px;
                width: 0;
                height: 30px;
                background-color: pink;
                /* 让文字强制一行内显示 */
                white-space: nowrap;
                /* steps 就是分几步来完成动画 设置steps 就不要再设置 ease 或者 linear 了 */
                animation: w 4s steps(10) forwards;
            }

            @keyframes w {
                0% {
                    width: 0;
                }
                100% {
                    width: 200px;
                }
            }
        </style>
    </head>

    <body>
        <div>世纪佳缘我在这里等你</div>
    </body>
</html>
